<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格线</title>
		<style type="text/css">
		.grid-container{
			display: grid;
			padding: 10px;
			background-color: #7FFFD4;
			grid-template-rows: [apple] 100px [banana] 200px [cat] ;
			grid-template-columns:[first] 1fr [second] 2fr [third] 3fr [last];
		 
			
		}
		.grid-container > div{
			background-color: #FFF8DC;
			padding: 50px ;
			border: #FFFFFF solid 2px;
			text-align: center;
			
		}
		</style>
	</head>
	<body>
		<div class="grid-container">
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>
			<div>6</div>
		</div>
	</body>
</html>
